<template>
  <el-form ref="formRef" :model="state.form" :rules="rules" :show-message="false" label-width="135px" v-loading="state.loading">
    <el-row :gutter='20'>
      <el-col :span=24>
        <el-form-item label='公司名称' prop='companyName'>
          <el-input v-model='state.form.companyName' placeholder="请输入公司名称" />
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label='公司简称' prop='companyShortName'>
          <el-input v-model='state.form.companyShortName' placeholder="请输入公司简称" />
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label='选择渠道' prop='companyShortName'>
          <x-select options="TENANT_LIST" type="remote" v-model="state.form.tenantId"></x-select>
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label='签约状态' prop='signStatus'>
          <el-select
              v-model='state.form.signStatus'
              placeholder='请选择'>
            <el-option label='合同期间' value='01' />
            <el-option label='合同终止' value='02' />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label='签约起止时间' prop='signTime'>
          <el-date-picker
              v-model='state.form.signTime'
              type='daterange'
              range-separator='至'
              start-placeholder='开始日期'
              end-placeholder='结束日期'>
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label='公司地址' prop='companyAddress'>
          <el-input v-model='state.form.companyAddress' placeholder="请输入公司地址，如：xx省xx市xx区" />
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label='公司详细地址' prop='companyDetailAddress'>
          <el-input v-model='state.form.companyDetailAddress' placeholder="请输入详细地址，如：xxx街道xxx室"/>
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label='客服电话' prop='customerServiceNumber'>
          <el-input v-model='state.form.customerServiceNumber' placeholder="请输入客服电话" />
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label='联系人姓名' prop='contactName'>
          <el-input v-model='state.form.contactName' placeholder="请输入联系人姓名" />
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label='联系人电话' prop='contactPhone'>
          <el-input v-model='state.form.contactPhone' placeholder="请输入联系人电话" />
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label='商户支付宝账号' prop='alipayAccount'>
          <el-input v-model='state.form.alipayAccount' placeholder="请输入商户支付宝账号，用于收款" />
        </el-form-item>
      </el-col>
      <el-col :span=12>
        <el-form-item label='商务专员' prop='businessPersonId'>
          <el-input v-model='state.form.businessPersonId' placeholder="请输入对接专员姓名" />
        </el-form-item>
      </el-col>
      <el-col v-if='!state.form.companyId' :span=12>
        <el-form-item label='登录账号' prop='userName'>
          <el-input v-model='state.form.userName' placeholder="设置商户登录账户" />
        </el-form-item>
      </el-col>
      <el-col v-if='!state.form.companyId' :span=12>
        <el-form-item label='登录密码' prop='password'>
          <el-input type='password' v-model='state.form.password' placeholder="设置商户登录密码" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup name="company-form">
import useStore from '@/stores/modules/platform/company';
const store = useStore();
import {defineExpose} from "vue";
// 提交表单数据
const state = reactive({
  loading: false,
  statusType: [{label: "正常", value: "0"},{label:"冻结", value: "9"}],
  form:{
    companyId: '',
    tenantId: '1',
    companyName: '',
    companyShortName: '',
    signStatus: '',
    signBeginTime: '',
    signEndTime: '',
    companyAddress: '',
    companyDetailAddress: '',
    customerServiceNumber: '',
    contactName: '',
    contactPhone: '',
    alipayAccount: '',
    businessPersonId: '',
    userName: '',
    password: '',
  }
});

const rules = ref({
  companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
  companyShortName: [{ required: true, message: '请输入公司简称', trigger: 'blur' }],
  signStatus: [{ required: true, message: '请选择签约状态', trigger: 'change' }],
  signBeginTime: [{ required: true, message: '请设置签约时间', trigger: 'blur' }],
  companyAddress: [{ required: true, message: '请输入公司地址，如：xx省xx市xx区', trigger: 'blur' }],
  companyDetailAddress: [{ required: true, message: '请输入公司详细地址，如：xxx街道xxx室', trigger: 'blur' }],
  customerServiceNumber: [{ required: true, message: '请输入客服电话', trigger: 'blur' }],
  contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
  contactPhone: [{ required: true, message: '请输入联系人电话', trigger: 'blur' }],
  alipayAccount: [{ required: true, message: '请输入商户支付宝账号，用于收款', trigger: 'blur' }],
  businessPersonId: [{ required: true, message: '请输入对接专员姓名', trigger: 'blur' }],
  userName: [{ required: true, message: '设置商户登录账户', trigger: 'blur' }],
  password: [{ required: true, message: '设置商户登录密码', trigger: 'blur' }],
});

const formRef = ref(null);
/**
 * 表单验证
 * @param callback
 * @returns {Promise<void>}
 */
const doValidate = async (callback) => {
  await formRef.value.validate((valid, fields) => {
    if (! valid) {
      let errMsg = Helper.getFirstMessage(fields);
      if (errMsg) {
        Msg.error(errMsg)
      }
      callback(false)
      return
    }

    callback(state.form)
  })
}

/**
 * 保存
 * @returns {Promise<void>}
 */
const submit = async () => {
  await doValidate(async (form) => {
    if (form == false) {
      return
    }

    if(! Helper.emptyArray(state.form.signTime)) {
      let beginTime = state.form.signTime[0];
      let endTime = state.form.signTime[1];
      state.form.signBeginTime = typeof beginTime == 'object' ? Helper.formatDate(beginTime, 'yyyy-MM-dd') : beginTime;
      state.form.signEndTime = typeof beginTime == 'object' ? Helper.formatDate(endTime, 'yyyy-MM-dd') : endTime;
    }

    let result = form.companyId ? await store.modify(form) : await store.save(form)
    if (result) {
      Dialog.close()
    }
  })
}


/**
 * 获取数据
 * @param data
 */
const render = (data, disabled) => {

  state.disabled = disabled;
  if(Helper.emptyJson(data)) {
    return
  }
  state.form = data;
  if(!Helper.empty(data.signBeginTime) && !Helper.empty(data.signEndTime)) {
    state.form.signTime = [data.signBeginTime, data.signEndTime]
  }
}

defineExpose({render, submit})

</script>

<style scoped>

</style>
